
import React, { Component } from 'react'
import axios from 'axios'
import './css/06-communication.css'
let context = React.createContext()

export default class App extends Component {
  constructor() {
    super()
    axios.get('/test.json').then(res => {
      console.log(res.data.data.films)
      this.setState({
        films: res.data.data.films
      })
    })
  }


  state = {
    films: [],
    info: ''
  }
  // handle = (synopsis) => {
  //   this.setState({
  //     value: synopsis
  //   })
  // }
  render () {
    return (
      <context.Provider value={{
        info: this.state.info, changeInfo: (synopsis) => {
          this.setState({
            info: synopsis
          })
        }
      }}>
        <div>
          {
            this.state.films.map(item =>
              <Films key={item.filmId} {...item} />
            )
          }
          <FilmsDetail />
        </div>
      </context.Provider>
    )
  }
}

class Films extends Component {
  render () {
    let { name, poster, synopsis } = this.props
    return (
      <context.Consumer>
        {(value) =>
          <div>
            <img src={poster} alt={name} onClick={() => {
              value.changeInfo(synopsis)
            }} />
            {name}
          </div>
        }
      </context.Consumer>
    )
  }
}
class FilmsDetail extends Component {

  render () {
    return (
      <context.Consumer>
        {
          (value) =>
            <div className='filmsDetail'>
              {value.info ? value.info : "FilmsDetail"}
            </div>
        }
      </context.Consumer>
    )
  }
}